<template>
  <view class="elecPeak">
    <view class="pickerBox">
      <picker-view
        indicator-style="height: 45px;"
        indicator-class="clearBorder"
        class="picker-style"
        :value="timeIndex"
        @change="changeElec"
        @pickstart="pickstart"
        @pickend="pickend"
      >
        <picker-view-column>
          <view
            class="picker2"
            :class="{ active: index === timeIndex[0] }"
            v-for="(item, index) in startTimes"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view
            class="picker2"
            :class="{ active: index === timeIndex[1] }"
            v-for="(item, index) in endTimes"
            :key="index"
            style="line-height: 45px; height: 45px"
          >
            {{ item }}
          </view>
        </picker-view-column>
      </picker-view>
      <view class="startUnit">-</view>
      <view class="endUnit" v-if="isTomorrow">次日</view>
    </view>
  </view>
</template>
<script setup lang="ts">
const startTimes = ref<string[]>([])
const endTimes = ref<string[]>([])
const timeIndex = ref([0, 0])

const props = defineProps<{
  show: boolean
  startTime: string[]
  endTime: string[]
  curStartTime: string
  curEndTime: string
  type?: string
  isTomorrow?: boolean
}>()

const emit = defineEmits<{
  (e: 'timechange', start: string, end: string): void
  (e: 'isPicking', value: boolean): void
}>()

watch(
  () => props.show,
  () => {
    startTimes.value = props.startTime
    endTimes.value = props.endTime
    initSetting()
  }
)

/**
 * 初始化数据
 */
function initSetting() {
  let newTimeIndex = [0, 0]
  for (let i = 0; i < startTimes.value.length; i++) {
    if (startTimes.value[i].replace(/\s+/g, '') == props.curStartTime.replace(/\s+/g, '')) {
      newTimeIndex[0] = i
      break
    }
  }
  for (let j = 0; j < endTimes.value.length; j++) {
    if (endTimes.value[j].replace(/\s+/g, '') == props.curEndTime.replace(/\s+/g, '')) {
      newTimeIndex[1] = j
      break
    }
  }
  nextTick(() => (timeIndex.value = newTimeIndex))
}
/**
 * 改变时间
 * @param e
 */
function changeElec(e: WechatMiniprogram.PickerViewChange) {
  let start = startTimes.value[e.detail.value[0]].replace(/\s+/g, '')
  let end = endTimes.value[e.detail.value[1]].replace(/\s+/g, '')
  timeIndex.value = [...(e.detail.value as number[])]
  emit('timechange', start, end)
}
function pickstart() {
  emit('isPicking', true)
}
function pickend() {
  emit('isPicking', false)
}
</script>

<style lang="less">
.elecPeak {
  width: 100%;
  .pickerBox {
    float: left;
    padding: 0 20rpx;
    position: relative;
    width: 100%;
    height: 135px;
    text-align: center;
    z-index: 9;
    box-sizing: border-box;
    .picker-style {
      float: left;
      width: 100%;
      height: 216rpx;
      text-align: center;
      font-size: 40rpx;
      color: #131b35;
      line-height: 45px;
    }
    .active {
      font-weight: 500;
      font-size: 24px;
      color: var(--primary-color);
    }
  }
  .elecTitle {
    margin-top: 50rpx;
    float: left;
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 26rpx;
    color: #4475d5;
    box-sizing: border-box;
  }
  .startUnit,
  .endUnit {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 80rpx;
    font-size: 22rpx;
    color: var(--primary-color);
    width: 30px;
    height: 30px;
  }
  .startUnit {
    left: 45%;
  }
  .endUnit {
    left: 86%;
  }
}
</style>
